<template>
    <el-dialog title="选择礼品产品数据"
        class='product-dialog'
        append-to-body
        width='75%'
        @close="closeEvt"
        :visible.sync="show">
        <page-layout>
            <template v-slot:header>
                <el-input v-model="query.name" placeholder="输入产品名字" size='small'/>
                <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            </template>

            <el-table :data="tableData"
                style="width: 100%"
                height="100%"
                highlight-current-row
                size='small'>
                <el-table-column prop="name" label="名字" width="150" fixed/>
                <el-table-column prop="price" label="售价" width="150"/>
                <el-table-column prop="brand" label="品牌" width="180"/>
                <el-table-column prop="place" label="产地"
                    show-overflow-tooltip width="260"/>
                <el-table-column label="操作" width="80">
                    <!-- <el-button type="text" @click="setCurrent(tableData)" size="small">选择</el-button> -->
                    <template slot-scope="{row}">
                        <el-button type="text" @click="giftSelect(row)" size="small">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <template v-slot:footer>
                <el-pagination :page-sizes="[20, 50, 100, 150]"
                    :page-size="query.size"
                    :current-page="query.page"
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"/>
            </template>
        </page-layout>
    </el-dialog>
</template>

<script>
import { giftListApi } from '@/apis/giftApi'
    export default {
        props: {
            value: {
                type: Boolean,
                required: true
            }
        },

        watch: {
            value(val) {
                this.show = val
            }
        },

        data() {
            return {
                show: false,
                tableData: [],
                query: {
                    name: '',
                    page: 1,
                    size: 20
                },
                total: 0,
                timer: null,
            }
        },

        mounted() {
            this.getList()
        },

        methods: {
            closeEvt() {
                this.$emit('input', false)
            },
            queryEvt() {
                this.query.page = 1
                this.getList()
            },
            async getList() {
                let result = await giftListApi(this.query)
                if (result.code === 200) {
                    this.tableData = result.data.rows
                    this.total = result.data.count
                }
            },
            fd() {
                if (this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.getList()
                }, 100)
            },
            sizeChange(size) {
                this.query.size = size
                this.fd()
            },
            currentChange(page) {
                this.query.page = page
                this.fd()
            },
            giftSelect(list) {
                this.$emit('giftSelect', list)
                this.$emit('input', false)
            },
        }
    }
</script>